<script setup lang="ts">
	// * 趋势统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, computed, watch } from 'vue'
	import { trendApi } from '@api/data'
	import { getThemeValue } from '@/utils/theme_utils'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()
	// 容器实例
	const fullRef = ref<HTMLDivElement>()

	interface stateType {
		chartsData: Record<string, any>
		isShow: boolean
		selectKey: { key: string; text: string }
		size: number
	}
	// 图表状态数据
	const state: stateType = reactive({
		chartsData: {},
		isShow: false,
		selectKey: { key: '', text: '' },
		size: 0
	})

	// echarts实例
	let myEcharts: echarts.ECharts = null

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	// 可被选择的列表
	const selectList = computed(() => {
		if (!state.chartsData.type) return []
		return state.chartsData.type.filter(item => item.key !== state.selectKey.key)
	})

	const selectStyle = computed(() => ({
		color: getThemeValue(theme.value).titleColor,
		background: getThemeValue(theme.value).backgroundColor,
		fontSize: state.size + 'px'
	}))

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 配置
		const option: echarts.EChartsOption = {
			tooltip: {
				trigger: 'axis'
			},
			grid: { top: '35%', left: '3%', bottom: '1%', right: '4%', containLabel: true },
			legend: { left: 20, top: '15%', icon: 'circle' },
			xAxis: { type: 'category', boundaryGap: false },
			yAxis: { type: 'value' },
			series: []
		}
		// 设置配置
		myEcharts.setOption(option)
	}

	// * 获取数据
	const getData = async () => {
		const { data } = await trendApi()
		console.log(data)
		state.chartsData = data
		state.selectKey = data.type && data.type[0]
		// 更新配置
		updateCharts()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 半透明的颜色值
		const colorArr1 = [
			'rgba(11, 168, 44, 0.5)',
			'rgba(44, 110, 255, 0.5)',
			'rgba(22, 242, 217, 0.5)',
			'rgba(254, 33, 30, 0.5)',
			'rgba(250, 105, 0, 0.5)'
		]
		// 全透明的颜色值
		const colorArr2 = [
			'rgba(11, 168, 44, 0)',
			'rgba(44, 110, 255, 0)',
			'rgba(22, 242, 217, 0)',
			'rgba(254, 33, 30, 0)',
			'rgba(250, 105, 0, 0)'
		]
		// 处理数据
		const names = state.chartsData.common.month
		const values = state.chartsData[state.selectKey.key].data.map(
			(item, i): echarts.SeriesOption => ({
				type: 'line',
				name: item.name,
				data: item.data,
				stack: 'map',
				lineStyle: { width: 2 },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: colorArr1[i] },
						{ offset: 1, color: colorArr2[i] }
					])
				}
			})
		)
		// 配置项
		const updateOption: echarts.EChartsOption = {
			xAxis: { data: names },
			series: values
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配
	const screenAdapter = () => {
		state.size = (fullRef.value.offsetWidth / 100) * 3.25
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			legend: {
				itemWidth: state.size * 0.8,
				itemHeight: state.size * 0.8,
				itemGap: state.size * 0.8,
				textStyle: { fontSize: state.size * 0.8 }
			}
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// 切换图表
	const handleSelect = item => {
		state.selectKey = item
		state.isShow = false
		updateCharts()
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="page_container">
		<div class="select-view" :style="selectStyle">
			<div class="title" @click="state.isShow = !state.isShow">
				<span>|</span> {{ state.selectKey.text }}
				<i class="iconfont" :class="state.isShow ? 'icon-arrow-up' : 'icon-arrow-down'" :style="selectStyle"></i>
			</div>
			<div class="select-list" v-show="state.isShow">
				<div class="select-item" v-for="item in selectList" :key="item.key" @click="handleSelect(item)">{{ item.text }}</div>
			</div>
		</div>
		<div class="full_container" ref="fullRef"></div>
	</div>
</template>

<style scoped lang="scss">
	.select-view {
		position: absolute;
		z-index: 99;
		color: #fff;
		font-size: 30px;
		top: 10px;
		left: 20px;
		padding: 10px 12px;
		user-select: none;
		cursor: pointer;
		.title {
			padding: 4px 0;
			display: flex;
			align-items: center;
			span {
				margin-right: 2vw;
			}
			.iconfont {
				transform: rotate(0deg);
				margin-left: 10px;
				font-size: 30px;
			}
		}
		.select-list {
			margin-left: 2.8vw;
		}
	}
</style>
